<template>
  <section>
    <s-button @click="visible1 = true">对话框1</s-button>
    <s-dialog title="对话框1" :visible="visible1" @close="visible1 = false"> 对话框1 </s-dialog>

    <s-button @click="visible2 = true" type="primary">对话框2</s-button>
    <s-dialog
      :visible="visible2"
      @close="visible2 = false"
      title="对话框2"
      width="1400px"
      top="50vh"
    >
      对话框2
      <template #footer>
        <s-button>取消</s-button>
        <s-button type="primary">确认</s-button>
      </template>
    </s-dialog>

    <s-button @click="visible3 = true" type="success">对话框3</s-button>
    <s-dialog
      :visible="visible3"
      @close="visible3 = false"
      title="对话框3"
      width="1400px"
      top="50vh"
      append-to-body
    >
      对话框3
      <template #footer>
        <s-button>取消</s-button>
        <s-button type="primary">确认</s-button>
      </template>
    </s-dialog>
  </section>
</template>

<script lang="ts" setup>
const visible1 = ref(false)
const visible2 = ref(false)
const visible3 = ref(false)
</script>

<style lang="scss" scoped></style>
